@import "./common2";

@function getvw($w) {
    @return($w/1920)*100+vw;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    user-select: none;
    // box-sizing: border-box;
}
body,html{
    min-width: 900px;
}
.box {
    nav {
        .nav_center {
            ul {
                li:nth-of-type(5) {
                    height: 65px;
                    text-align: center;
                    line-height: 65px;
                    border-bottom: 1px solid #19bc64;
                    a {
                        color: #19bc64;
                    }
                }
            }
        }
    }

    .banner {
        width: 100%;
        height: 681px;
        background-image: url(../img/News/banner\ 拷贝.png);
        position: relative;

        div:nth-of-type(1) {
            position: absolute;
            top: getvw(230);
            left: getvw(580);

            p:nth-of-type(1) {
                color: white;
                font-size: getvw(70);
                font-weight: 300;
            }

            p:nth-of-type(2) {
                color: white;
                font-size: getvw(16);
                text-align: center;
                font-weight: 100;
            }
        }

        div:nth-of-type(2) {
            width: getvw(206);
            height: getvw(70);
            border: 1px solid white;
            text-align: center;
            line-height: getvw(70);
            font-size: getvw(48);
            color: white;
            font-weight: 300;
            position: absolute;
            top: getvw(400);
            left: getvw(865);
        }
    }

    .brand_information {
        width: 100%;
        height: getvw(740);
        margin: 0 auto;
        padding-top: 20px;
        position: relative;

        .brand_information_title {
            width: getvw(450);
            margin: 0 auto;
            position: relative;

            p:nth-of-type(1) {
                font-size: getvw(36);
                color: #666666;
                font-weight: 300;
                text-align: center;
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                color: #333333;
                text-align: center;
                margin-top: getvw(20);
            }
        }

        .brand_information_box {
            width: getvw(1200);
            height: getvw(460);
            margin: 0 auto;
            margin-top: getvw(50);
            padding-top: getvw(36);
            box-sizing: border-box;
            background-color: #e6e6e6;

            .information_box_main {
                margin: 0 auto;
                max-width: getvw(1000);
                display: flex;
                justify-content: space-between;
            }

            .news_box_left {
                width: getvw(495);
                height: getvw(386);
                background-color: white;

                img {
                    width: getvw(495);
                    height: getvw(235);
                }

                div {
                    width: getvw(440);
                    height: getvw(70);
                    position: relative;


                    p:nth-of-type(1) {
                        font-size: getvw(18);
                        font-weight: 600;
                        letter-spacing: getvw(2);
                        margin: getvw(30) 0 getvw(30) getvw(32);
                    }

                    p:nth-of-type(2) {
                        font-size: getvw(12);
                        letter-spacing: getvw(1);
                        color: #333333;
                        margin-left: getvw(32);
                    }
                }

            }

            .news_box_right {
                width: getvw(495);
                height: getvw(386);
                display: flex;
                flex-direction: column;
                justify-content: space-between;



                div {
                    background-color: white;
                    width: getvw(495);
                    height: getvw(120);
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    img {
                        width: getvw(116);
                        height: getvw(90);
                    }

                    .right {
                        width: getvw(290);
                        height: getvw(90);
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;

                        p:nth-of-type(1) {
                            font-size: getvw(14);
                            text-align: left;
                        }

                        p:nth-of-type(2) {
                            width: getvw(289);
                            font-size: getvw(12);
                            color: #333333;
                        }
                    }

                }
            }

        }

        button {
            width: getvw(160);
            height: getvw(40);
            margin: 0 auto;
            border: 1px solid #e6e6e6;
            background-color: white;
            display: block;
            margin-top: getvw(40);
            cursor: pointer;
        }
    }


    .brand_information::after {
        content: '';
        background-color: #666666;
        width: getvw(700);
        height: 1px;
        position: absolute;
        top: getvw(80);
        left: getvw(0);
    }

    .brand_information::before {
        content: '';
        background-color: #666666;
        width: getvw(700);
        height: 1px;
        position: absolute;
        top: getvw(80);
        right: getvw(0);
    }

    .top_news{
        width: 100%;
        height: getvw(1088);
        position: relative;
        .top_news_title {
            width: getvw(450);
            margin: 0 auto;
            position: relative;

            p:nth-of-type(1) {
                font-size: getvw(36);
                color: #666666;
                font-weight: 300;
                text-align: center;
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                color: #333333;
                text-align: center;
                margin-top: getvw(20);
            }
        }
        .top_news_main{
            width: getvw(1200);
            margin: 0 auto;
            height: getvw(800);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items:flex-start;
            margin-top: getvw(50);

            div{
                width: getvw(370);
                height: getvw(373);
                border: 1px solid #cccccc;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                
                img{
                    width: getvw(348);
                    height: getvw(228);
                }
                p:nth-of-type(1){
                    width: getvw(313);
                    height: getvw(47);
                    font-size: getvw(16);
                    color: #333333;
                }
                p{
                    width: getvw(313);
                    height: getvw(47);
                    text-align: left;
                    color: #666666;
                }
            }
        }
        button{
            width: getvw(160);
            height: getvw(40);
            margin: 0 auto;
            border: 1px solid #e6e6e6;
            background-color: white;
            display: block;
            margin-top: getvw(40);
            cursor: pointer;
        }

    }
    .top_news::after {
        content: '';
        background-color: #666666;
        width: getvw(750);
        height: 1px;
        position: absolute;
        top: getvw(60);
        left: getvw(0);
    }

    .top_news::before {
        content: '';
        background-color: #666666;
        width: getvw(750);
        height: 1px;
        position: absolute;
        top: getvw(60);
        right: getvw(0);
    }
    .residence_tendency{
        width: 100%;
        height: getvw(1100);
        position: relative;

        .residence_tendency_title{
            width: getvw(450);
            margin: 0 auto;

            p:nth-of-type(1) {
                font-size: getvw(36);
                color: #666666;
                font-weight: 300;
                text-align: center;
                
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                color: #333333;
                text-align: center;
                margin-top: getvw(20);
            }
        }
        .residence_tendency_main{
            width: getvw(1200);
            height: getvw(800);
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items:flex-start;
            margin-top: getvw(50);

            div{
                width: getvw(380);
                height: getvw(350);
                position: relative;
                overflow: hidden;

                img{
                    width: getvw(380);
                height: getvw(350);
                }

                div{
                    width: getvw(380);
                    height: getvw(130);
                    // display: none;
                    position: absolute;
                    // bottom: 0;
                    // left: 0;
                    background-color: rgba($color: #000000, $alpha: 0.6);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    

                    p:nth-of-type(1){
                        width: getvw(366);
                        color: white;
                        font-size: getvw(18);
                    }
                    p:nth-of-type(2){
                        width: getvw(366);
                        height: getvw(34);
                        color: #cccccc;
                        font-size: getvw(12);
                        overflow: hidden;
                    }
                    p:nth-of-type(3){
                        width: getvw(366);
                        height: getvw(34);
                        color: #ffffff;
                        font-size: getvw(12);
                    }
                }
            }
            div:hover div{
                bottom: 0;
                left: 0;
            }
        }
        button{
            width: getvw(160);
            height: getvw(40);
            margin: 0 auto;
            border: 1px solid #e6e6e6;
            background-color: white;
            display: block;
            cursor: pointer;
        }
    }
    .residence_tendency::after {
        content: '';
        background-color: #666666;
        width: getvw(750);
        height: 1px;
        position: absolute;
        top: getvw(60);
        left: getvw(0);
    }

    .residence_tendency::before {
        content: '';
        background-color: #666666;
        width: getvw(750);
        height: 1px;
        position: absolute;
        top: getvw(60);
        right: getvw(0);
    }

    .brand_video{
        width: 100%;
        height: getvw(660);
        position: relative;
        .brand_video_title {
            width: getvw(450);
            margin: 0 auto;
            margin-bottom: getvw(30);
            position: relative;

            p:nth-of-type(1) {
                font-size: getvw(36);
                color: #666666;
                font-weight: 300;
                text-align: center;
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                color: #333333;
                text-align: center;
                margin-top: getvw(20);
            }
        }
        .brand_video_main{
            width: getvw(1200);
            height: getvw(480);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            div{
                width: getvw(555);
                height: getvw(400);
                position: relative;
                img{
                    width: getvw(555);
                    height: getvw(350);
                }
                p{
                    text-align: center;
                font-weight: 600;
                margin-top: getvw(20);
                }
                i{
                    font-size: getvw(90);
                    color: white;
                    position: absolute;
                    top: getvw(140);
                    left: getvw(235);
                }
                
            }
        }
    }
    .brand_video::after {
        content: '';
        background-color: #666666;
        width: getvw(750);
        height: 1px;
        position: absolute;
        top: getvw(60);
        left: getvw(0);
    }

    .brand_video::before {
        content: '';
        background-color: #666666;
        width: getvw(750);
        height: 1px;
        position: absolute;
        top: getvw(60);
        right: getvw(0);
    }
}